<template>
    <div class="component-live">
        <!-- <el-tabs>
            <el-tab-pane
                v-for="item in tabs"
                :key="item.name"
                :label="item.name"
                @click.native="
                    () => {
                        console.log('click', item)

                        childCom = item.component
                    }
                "
            >
            </el-tab-pane>
        </el-tabs> -->
        <el-radio-group v-model="childCom">
            <el-radio-button
                v-for="(item, index) in tabs"
                :key="item.name"
                :label="item.component"
            >
                {{ `${item.name}${index}` }}
            </el-radio-button>
        </el-radio-group>
        <keep-alive>
            <component :is="childCom"></component>
        </keep-alive>
    </div>
</template>
<script>
import FirstVue from './components/First.vue'
import SecoundVue from './components/Second.vue'
export default {
    name: 'ComponentLive',
    data() {
        return {
            tabs: [
                {
                    name: 'First',
                    component: FirstVue,
                },
                {
                    name: 'Secound',
                    component: SecoundVue,
                },
            ],
            childCom: FirstVue,
        }
    },
    beforeCreate() {
        console.log('beforeCreate father')
    },
    created() {
        console.log('created father')
    },
    beforeMount() {
        console.log('beforeMount father')
    },
    mounted() {
        console.log('mounted father')
    },
    beforeDestroy() {
        console.log('beforeDestroy father')
    },
    destroyed() {
        console.log('destroyed father')
    },
    beforeEach(to, from, next) {
        console.log('beforeEach father')
        next();
    },
    beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter father')
        next()
    },
    beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave father')
        next()
    }
}
</script>
<style lang="scss" scoped>
.component-live {
}
</style>
